<template>
  <div class="testPage">
    <div class="testBg">
      <div class="testcontent" id="mainLayout">
        <div class="testMain" :style="testMainStyle">
          <div class="hubtn" @click="handleGoto"></div>
          <div class="btndev" @click="handleGotoDev"></div>
          <div class="pagePre" @click="handlePre" v-if="pagePre"></div>
          <div class="pageNext" @click="handleNext" v-if="pageNext"></div>
          <div class="bgmainbox">
            <div v-for="(item, index) in listData" :key="index" class="bgmain" :class="item.className">
              <div class="modelBtn">
                <p>{{ item.modelName }}</p>
              </div>
              <p class="sjbtn sjbtn1" @click="gotoSJZB(item.id)">数据整编</p>
              <p class="sjbtn sjbtn2" @click="gotoMXXL(item.id)">模型训练</p>
              <p class="sjbtn sjbtn3" @click="gotoCSPG(item.id)">测试评估</p>
              <p class="sjbtn sjbtn4" @click="gotoBSGL(item.id)">部署管理</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import VueApng from 'vue-apng'
import "@/assets/styles/factory.scss";
import { getFactoryLists, getModelInfo } from "@/api/aifactory";
// import modelEditVue from '../modelmanage/components/modelEdit.vue';
export default {
  name: "",
  components: { VueApng },
  data() {
    return {
      testMainStyle: {},
      mheight: "",
      mwidth: "",
      jiantou1: {},
      initData: [],
      listData: [],
      interval: null,
      firstKey: null, //显示列表3个元素 的第一个key值
      pagePre: false, //向上翻页，初始化显示前三个，不能向上
      pageNext: true, //向下翻页
    };
  },
  created() { },
  async mounted() {
    // this.setRem();
    this.handleResize();
    window.addEventListener("resize", this.handleResize());
    this.fetchData();
    setTimeout(() => {
      let data = JSON.parse(JSON.stringify(this.initData));
      if (data.length > 0 && data.length >= 2) {
        this.firstKey = 1;
        this.pageNext = data.length > 3 ? true : false;
        this.listData = data.splice(0, 3);
        this.listData.forEach((item, index) => {
          item.className = "bgmain" + (index + 1);
        });
      }
    }, 1000);

    return () => {
      window.removeEventListener("resize", this.handleResize());
    };
  },
  methods: {
    setRem() {
      const baseSize = 16; // 可以根据设计稿调整
      const htmlEle = document.documentElement;
      console.log(79, htmlEle)
      const deviceWidth =
        htmlEle.getBoundingClientRect().width || window.innerWidth;
      htmlEle.style.fontSize = deviceWidth / baseSize + "px";
      console.log(87, deviceWidth, htmlEle.style.fontSize);
    },
    handleResize() {
      const imgw = 1920,
        imgh = 1016;
      var box = document.getElementById("mainLayout");
      if (box.offsetWidth / box.offsetHeight > imgw / imgh) {
        let h = box.offsetHeight * 1;
        this.mheight = h + "px";
        var w = (h * 1920) / 1016;
        this.mwidth = w + "px";
        let jiantou1X = (parseInt(w) * 300) / 1800 + "px";
        let jiantou1Y = (parseInt(h) * 245) / 918 + "px";
        this.jiantou1 = { right: jiantou1X, top: jiantou1Y };
      } else {
        let w = box.offsetWidth * 0.9375;
        this.mwidth = w + "px";
        var h = (w * 1016) / 1920;
        this.mheight = h + "px";
      }
      this.testMainStyle = { width: this.mwidth, height: this.mheight };
      console.log("w", this.mwidth, "h", this.mheight, this.testMainStyle);
    },
    fetchData() {
      getFactoryLists().then((res) => {
        if (res.code == 200) {
          this.initData = res.data;
        }
      });
    },
    handleGoto() {
      this.$router.push("/analysis/dataoverview");
    },
    handleGotoDev() {
      this.$router.push("/analysis/algorithmevaluation");
    },
    gotoSJZB(modelId) {
      this.$router.push("/aifactory/dataset?modelId=" + modelId);
    },
    gotoMXXL(modelId) {
      console.log(125, modelId)
      if (modelId == 1 || modelId == 7) {
        this.$router.push("/aifactory/modelview?id=" + modelId);
        // this.$router.push({ path: '/aifactory/modelview/', query: { id: modelId}});
      }
    },
    gotoCSPG(modelId) {
      if (modelId == 1) {
        this.$router.push("/analysis/spotevalution");
      }
    },
    gotoBSGL(modelId) {
      this.$router.push("/aifactory/versionmanage?id=" + modelId);
      // this.$router.push({ path: '/aifactory/versionmanage/', query: { id: modelId} });
    },
    handlePre() {
      let data = JSON.parse(JSON.stringify(this.initData));
      if (parseInt(this.firstKey) - 1 >= 0) {
        let index = parseInt(this.firstKey) - 1;
        this.firstKey = index;
        this.pagePre = index > 1 ? true : false;
        this.pageNext = data.length - 2 > index ? true : false;
        this.listData = data.splice(index - 1, 3);
        this.listData.forEach((item, index) => {
          item.className = "bgmain" + (index + 1);
        });
      }
    },
    handleNext() {
      let data = JSON.parse(JSON.stringify(this.initData));
      if (parseInt(this.firstKey) + 3 <= data.length) {
        let index = parseInt(this.firstKey) + 1;
        this.firstKey = index;
        this.pagePre = index > 1 ? true : false;
        this.pageNext = data.length - 2 > index ? true : false;
        this.listData = data.splice(index - 1, 3);
        this.listData.forEach((item, index) => {
          item.className = "bgmain" + (index + 1);
        });
      }
    },
  },
};
</script>
<style scoped>
.ai-progress {
  line-height: 1.5 !important;
  width: 60%;
}
</style>
